<template>
	<view>
		<view class="img_wrap">
			<!-- 头部 -->
			<cu-custom bgColor="bg-gradual-blue" >
				<block slot="content">我的资料</block>
			</cu-custom>
			<!-- 头像 -->
			<view class="padding-sm radius shadow bg-white" @click="modify">
				<view class='imgText' >头像</view>
                    <img class="modify_info" :src="userData.avatarurl == undefined ? avatar : a_url + userData.avatarurl" alt="" style="width:60px;height:60px">
				<view style="clear: both;"></view>
			</view>
			<!-- 姓名 -->
			<view class="padding-sm radius shadow bg-white marTop" @click="setName">
				<view class='imgText'>昵称</view>
				<view class='name fr'>{{userData.name}}</view>
				<view style="clear: both;"></view>
			</view>
            <!-- id -->
			<view class="padding-sm radius shadow bg-white marTop">
				<view class='imgText'>member_id</view>
				<view class='name fr'>{{userData.member_id}}</view>
				<view style="clear: both;"></view>
			</view>
			<!-- 账号 -->
			<view class="padding-sm radius shadow bg-white marTop">
				<view class='imgText'>手机号</view>
				<view class='name fr'>{{userData.username}}</view>
				<view style="clear: both;"></view>
			</view>
			<!-- 修改按钮 -->
			<button class="cu-btn bg-red margin-tb-sm lg" style="width: 90%;margin:10px auto" @click="loginOut">退出登录</button>
		</view>
		<!-- 修改头像弹框 -->
		<view class="cu-modal" :class="modalPhoto==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改头像</view>
					<view class="action" @tap="hidePhotoModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
                    <!-- 头像 -->
                    <view class="cu-form-group">
                        <view class="grid col-1 grid-square flex-sub">
                            <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
                            <image :src="imgList[index]" mode="aspectFill" style="left:0px"></image>
                                <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                                    <text class='cuIcon-close'></text>
                                </view>
                            </view>
                            <view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
                                <text class='cuIcon-cameraadd'></text>
                            </view>
                        </view>
                    </view>
				</view>
                <view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hidePhotoModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @click="isOk">确定</button>
					</view>
				</view>
			</view>
		</view>
        <!-- 修改名字 -->
        <view class="cu-modal" :class="modalName==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改名字</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group margin-top">
                        <view class="title">昵称</view>
                        <input placeholder="昵称不能为空" name="input" v-model="userData.name" ></input>
                    </view>
				</view>
                <view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @click="isName">确定</button>
					</view>
				</view>
			</view>
		</view>
		<newMessage ref='newMessage'></newMessage>
	</view>
</template>

<script>
	import newMessage from '../../asstess/newMessage/newMessage'
	export default {
		data() {
			return {
                modalPhoto:false,
                modalName:false,
                userData:{
                    // name:'1',
                    // username:'1'
                },
                imgList: [],
                bool:false,
                a_url:'http://v3-a.xgwl.net.cn',
                avatar:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
			}
		},
		methods: {
            ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
            },
            DelImg(e) {
                this.imgList.splice(e.currentTarget.dataset.index, 1)
                this.photo = ''
			},
            ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
                        let file = res.tempFiles[0]
                        this.$Socket.action("editAvatarurl", { file }, (res) => {
                            if(res.body.code == 200){
                                this.userData = res.body.data
                            }
                            this.hidePhotoModal()
                            uni.showToast({
                                icon:"none",
                                title: '头像修改成功',
                                duration: 2000
                            });
                        },()=>{})/* .then((res1)=>{console.log(res1)}) */;
						if (this.imgList.length != 0) {
                            this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			loginOut(){
                sessionStorage.clear()
                localStorage.clear()
				uni.navigateTo({
					url:'/pages/login/login'
                })
                window.location.reload()
			},
			hidePhotoModal(){
                this.modalPhoto = false
			},
            hideModal(){
                this.modalName = false
			},
			// 修改头像
			modify() {
				this.modalPhoto = true
            },
            // 修改名字
            setName(){
                this.modalName = true
            },
            isOk(){
                this.hidePhotoModal()
            },
            isName(){
                if(this.userData.name != ''){
                    let name = this.userData.name
                    this.$Socket.action('editSelfName',{name},(res)=>{
                        if(res.body.code == 200){
                            if(res.body.code == 200){
                                this.userData = res.body.data
                            }
                            this.hideModal()
                            uni.showToast({
                                icon:"none",
                                title: '昵称修改成功',
                                duration: 2000
                            }); 
                        }
                    },()=>{})
                }
            }
		},
		onLoad() {
		    // 获取本地存储内数据
		    let data  = sessionStorage.getItem('userData')
            if(data){
                this.userData = JSON.parse(data)
                console.log(this.userData)
            }else{
                uni.showToast({
                    icon:"none",
                    title: '请先登录',
                    duration: 2000
                });
            }
            // 新消息弹框
		},
		components: {
			newMessage
		}
	}
</script>

<style>
    .toux{
        margin-left: 240px;
    }
	.img_wrap{
		text-align: center;
		
	}
	.imgText{
		float: left;
		margin-top: 40rpx;
		font-size: 40rpx;
	}
	.fr{
		float: right;
	}
	.name{
		font-size: 40rpx;
		margin-top: 40rpx;
	}
	.padding-sm{
		margin-left: 10rpx;
		margin-right: 10rpx;
		height: 168rpx;
	}
	.marTop{
		margin-top: 20rpx;
	}
    .modify_info{
        border:0px;
        margin-left: 240px;
        border-radius: 50%;
    }
</style>
